<template>
	<!--首页图片 -->
	<view class="indexContainer">
		<view v-if="headStatisticsObject">
			<image class="carouselChart" :src="headImage? headImage:'../../static/Rectangle 2499.png'" mode=""></image>

			<!--  -->
			<view class="indexBottomContianer">
				<!-- <image   src="/static/15555.png"></image> -->
				<block>
					<image mode="widthFix" class="bj-img" src="../../static/15555.png"></image>

					<!-- 商家数量 -->
					<view class="flex-start">
						<image class="merchantsImage" src="../../static/Frame.png" mode=""></image>
						<view>
							商家数量(家)
						</view>

					</view>
					<view class="merchantsNumber">
						{{headStatisticsObject.totalMerchant}}
					</view>
				</block>
				<block>

					<view class="flex-around topDisance">
						<image mode="widthFix" class="bj-img" src="../../static/15555.png"></image>

						<!-- 商家数量 -->
						<view class="flex-start">
							<image class="videoImg" src="../../static/Group 3545.png" mode=""></image>
							<view>
								<view class="voideoNum">
									{{headStatisticsObject.totalVideo}}
								</view>
								<view style="color: #666;">
									创建视频(条)
								</view>

							</view>

						</view>


						<image mode="widthFix" class="bj-img" src="../../static/15555.png"></image>

						<!-- 商家数量 -->
						<view class="flex-start">
							<image class="videoImg" src="../../static/Group 3544.png" mode=""></image>
							<view>
								<view class="voideoNum">
									{{headStatisticsObject.totalExposureAmount}}
								</view>
								<view style="color: #666;">
									曝光数量 (次)
								</view>

							</view>

						</view>
					</view>


				</block>

				<!-- 申请入驻  店铺配置。。。-->

				<block>
					<view class="card  flex-wrap-justifyBetween">
						<block 
							v-for="(item,i) in menuNavigationList" :key="i" >
                            <view @click="middleJump(item.type)" class="flex-column width25" v-if="(item.text=='申请入驻'&&(!merchantId))">
                            	<image class="avater" :src="item.img" mode=""></image>
                            	<view class="rightContent">
                            		<view class="authorizationTitle">
                            			{{item.text}}
                            		</view>
                            	</view>
                            </view>
							<view  @click="middleJump(item.type)" class="flex-column width25" v-if="(item.text!='申请入驻')">
								<image class="avater" :src="item.img" mode=""></image>
								<view class="rightContent">
									<view class="authorizationTitle">
										{{item.text}}
									</view>
								</view>
							</view>

						</block>


					</view>
				</block>
				<view class='flex-columns' style="margin-top:44rpx">
					<block>
						<view class="flex-between bottom14">
							<view>
								<!-- 创作中心 -->
								<image @click="middleJump(8)" class="createCenter" src="../../static/Mask group.png" mode=""></image>
							</view>

							<view class="endFlex">
                                <!-- 同城爆店码 -->
								<image @click="middleJump(7)" class="storeCode" src="../../static/Mask1 group.png" mode=""></image>
								<!-- 矩阵发布 -->
								<image @click="middleJump(1)" class="matrixPublishing" src="../../static/Mask group-1.png" mode=""></image>
							</view>

						</view>
					</block>
					<block>
						<view class="flex-between bottom14">
                            <!-- 数字人剪辑 -->
							<image @click="middleJump(2)" class="storeCode" src="../../static/Mask group-2.png" mode=""></image>
                            <!-- 云闪推 -->
							<image @click="middleJump(5)" class="storeCode" src="../../static/Mask group-3.png" mode=""></image>


						</view>
					</block>
					<block>
						<view class="flex-between bottom14">
                            <!-- 抖支付 -->
							<image @click="middleJump(6)"  class="storeCode" src="../../static/Mask group-5.png" mode=""></image>
							<!-- 现场大屏 -->
							<image  @click="middleJump(3)" class="storeCode" src="../../static/Mask group-4.png" mode=""></image>
						</view>
					</block>
				</view>
	
					
				<!-- 更多工具 -->
				<view class="card ">
				        <view class="moreTool">
				        	更多工具
				         </view>
						<view class=" flex-wrap-justifyBetween">
							<view class="flex-column moreToolTab" @click="toGoBottom(item.url)" v-for="(item,i) in moreTools"
								:key="i">
							
								<image class="avater" :src="item.img" mode=""></image>
								<view class="rightContent">
									<view class="moreToolTitle">
										{{item.text}}
									</view>
								</view>
								<view v-if="item.developing" class="developingStyle">
									开发中
								</view>
							</view>
						</view>
				


				</view>

			</view>
		</view>


	</view>

</template>

<script>
	export default {
		data() {
			return {
				title: 'index',
				// 菜单导航
                headImage:null,
				menuNavigationList: [{
						img: '/static/Group 3539.png',
						text: '申请入驻',

						// url: '/pages/statistics/index/index'
					},
					{
						img: '/static/Group 3540.png',
						text: '店铺配置',
						url: '/pages/merchantConfiguration/merchantConfiguration',
						type:9
					},
					{
						img: '/static/Group 3541.png',
						text: '素材管理',
						type:10
						// url: '/pages/withdrawal/withdrawa-account/withdrawa-account'
					},
					{
						img: '/static/Group 3543.png',
						text: '创作成片',
						type:11
						// url: '/pages/service-area/service-area'
					},
					{
						img: '/static/Group 3542.png',
						text: '云闪成片',
						type:12
						// url: '/pages/personalInformation/userEvaluate/userEvaluate'
					},

				],
				// 更多工具
				moreTools: [{
						img: '/static/Group 3378.png',
						text: '热门数据',
						developing: true
						// url: '/pages/statistics/index/index'
					},
					{
						img: '/static/Group 3379.png',
						text: 'AI文案',
						developing: true
						// url: '/pages/withdrawal/withdrawal-records/withdrawal-records'
					},
					{
						img: '/static/Group 3380.png',
						text: '脚步创作',
						developing: true
						// url: '/pages/withdrawal/withdrawa-account/withdrawa-account'
					},
					{
						img: '/static/Group 3382.png',
						text: '去水印',
						developing: true
						// url: '/pages/service-area/service-area'
					},
					{
						img: '/static/Group 3381.png',
						text: '客户案例',
						developing: false,
						url: '/pages/index/caseCenter'
					},

				],
				// 商家统计
				 merchantId: uni.getStorageSync('merchantId'),
				// 头部统计
				headStatisticsObject:null
			}
		},
		onShow(){
			console.log('11111')
			this.merchantId= uni.getStorageSync('merchantId')
		},
		onLoad() {
           this.init()
		   
		},
		
		methods: {
			// 底部跳转
          toGoBottom(url){
			 
			  if(url){
				  	
				    this.$sun.navSwitch(url)
			  }else{
				   this.$sun.toast("敬请期待~", 'error');
			  }
			
			 
		  },
		 
		  middleJump(type){
			  console.log(type)
			  //1矩阵发布  2数字人剪辑  3现场大屏
			  	//4视频剪辑  5云闪推  6抖支付
			  	//7同城爆店码  8创作中心 9店铺配置 10素材管理 11创作成片 12云闪成片
				
			  	if (type == 7) {
			  		  this.$sun.toast("敬请期待~", 'error');
			  		// if (uni.getStorageSync('staffId')) {
			  		// 	uni.reLaunch({
			  		// 		url: '/pages/index/writeOffPage'
			  		// 	})
			  		// 	return;
			  		// }
			  		
			  		// if (uni.getStorageSync('merchantId')) {
			  		// 	uni.navigateTo({
			  		// 		url: '/pages/index/index'
			  		// 	})
			  		// }else {
			  		// 	uni.navigateTo({
			  		// 		url: '/pages/index/login?type='+type
			  		// 	})
			  		// }
			  		
			  	}else if (type == 8) {
					  this.$sun.toast("敬请期待~", 'error');
			  	
			  	}
			  	else if(type == 6){
			  		if (uni.getStorageSync('merchantId')) {
			  			uni.navigateTo({
			  				url: '/pages/doPay/doPay'
			  			})
			  		}else {
			  			uni.navigateTo({
			  				url: '/pages/index/login?type='+type
			  			})
			  		}
			  	
			  	}
			  	else if(type == 9){
			  		if (uni.getStorageSync('merchantId')) {
			  			uni.navigateTo({
			  				url: '/pages/merchantConfiguration/merchantConfiguration'
			  			})
			  		}else {
			  			uni.navigateTo({
			  				url: '/pages/index/login?type='+type
			  			})
			  		}
			  	
			  	
			  	}
				else if (type == 1) {
					  this.$sun.toast("敬请期待~", 'error');
				}
				else if (type == 2) {
					  this.$sun.toast("敬请期待~", 'error');
				}
				else if (type == 3) {
					  this.$sun.toast("敬请期待~", 'error');
				}
				else if (type == 4) {
					  this.$sun.toast("敬请期待~", 'error');
				}
				
			  	else if (type == 5) {
			  		  this.$sun.toast("敬请期待~", 'error');
			  	}
				
				else if (type == 10) {
					  this.$sun.toast("敬请期待~", 'error');
				}
				else if (type == 11) {
					  this.$sun.toast("敬请期待~", 'error');
				}
				else if (type == 12) {
					  this.$sun.toast("敬请期待~", 'error');
				}
			  	else {
			  		uni.navigateTo({
			  			url: '/pages/index/login'
			  		})
			  	}
			  
		  },
		  // 中部跳转
		  async init(){
			  // 获取头像信息
			  
			  
			  const result = await this.$http.get({
			  	url: this.$api.getXcxHeadStatistics,
			  
			  });
			  
			  if(result.code==2000){
				  console.log(result)
				  this.headStatisticsObject=result.data
			  }
			  
			  
			  // 获取头部信息
			  const res = await this.$http.get({
			  	url: this.$api.getHeadImage,
			    data:{
					merchantId:this.merchantId
				}
			  }); 
			  console.log(res)
			  if(res.code==2000){
				  this.headImage=res.data.xcxHomePageImg
			  }
			  
		  }
		}
	}
</script>

<style lang="less" scoped>
	.indexContainer {
		.carouselChart {
			width: 752rpx;
			height: 374rpx;



		}

		.indexBottomContianer {
			transform: translateY(-30px);
			padding: 28rpx;
			border-radius: 20px;

			position: relative;
			z-index: 899;
			background-color: #fff;
			border-radius: 40rpx;
			// height: 100vh;

			.merchantsImage {
				width: 40rpx;
				height: 40rpx;
				margin-right: 12rpx;
			}

			.merchantsNumber {
				margin-top: 10rpx;
				color: #333;
				font-size: 52rpx;
				font-style: normal;
				font-weight: 800;
			}

			.videoImg {
				margin-right: 20rpx;
				width: 90rpx;
				height: 90rpx;
			}

			.voideoNum {
				color: #333;
				font-weight: 800;
				font-size: 18px;
			}

			.topDisance {
				margin-top: 56rpx;
			}

			.bj-img {
				position: absolute;
				top: 0;
				right: 0;
				width: 238rpx;
				height: 238rpx;

			}


			.card {
				margin-top: 40rpx;
                .moreTool{
					margin-bottom: 40rpx;
					color: #000;
					
					font-family: Roboto;
					font-size: 16px;
					font-style: normal;
					font-weight: 600;
				}
				.avater {
					width: 56rpx;
					height: 56rpx;
					margin-bottom: 14rpx;

				}

				.rightContent {
					.authorizationTitle {
						color: #000;
						font-size: 28rpx;
						font-weight: 600;
						margin-bottom: 11rpx;
					}

					.moreToolTitle {
						color: #666666;
						font-size: 28rpx;
						font-weight: 600;
						margin-bottom: 11rpx;
					}

					.authorizationText {
						color: #666;
						font-family: Inter;
						font-size: 24rpx;
					}

				}

				.moreToolTab {
					position: relative;

					.developingStyle {
						z-index: 999;
						top: -20rpx;
						right: -25rpx;
						position: absolute;
						text-align: center;
						font-size: 18rpx;
						color: #fff;
						font-weight: 400;
						width: 40px;
						height: 17px;
						background-color: red;
					}

				}
			}

			.bottom14 {
				margin-bottom: 16rpx;
				width: 100%;
			}

			.createCenter {
				width: 343.062rpx;
				height: 380rpx;
			}

			.endFlex {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-direction: column;
				height: 370rpx;

			}

			.storeCode {
				width: 342rpx;
				height: 180rpx;
			}

			.matrixPublishing {
				width: 342rpx;
				height: 180rpx;
			}




		}
	}
</style>